<template>
                                <!-- 公告 -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span class="">公告列表</span>
    </div>
    <div class="text item">
      <!-- 搜索 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="新闻">
          <el-input v-model="formInline.user" placeholder="新闻名" size="small"></el-input>
        </el-form-item>
        <el-form-item label="公告类型">
          <el-select v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <el-row>
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
        <el-button type="danger" @click="shan">批量删除</el-button>
      </el-row>
      <!-- 表格 -->
      <template
      >
        <div>
          <TableList 
            :tableData="list"
            :tableHead="tableHead"
            @shan='open' 
            @xiu='xiu'
            @handleSelectionChange='handleSelectionChange'
            />
        </div>
                  <!-- 添加 -->
        <el-dialog
          title="添加公告"
          :visible="dialogVisible"
          width="70%"
          :before-close="handleClose">
            <span>
              <el-form :inline="true" :model="addQuery" class="demo-form-inline">
                <el-form-item label="标题">
                  <el-input v-model="addQuery.title"></el-input>
                </el-form-item>
              </el-form>
              <!-- 文本域 -->
              <el-form >
                <el-form-item label="公告内容">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="addQuery.content">
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 上传图片 -->
              <el-form >
                <el-form-item label="公告图片">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-form>
              <!-- 状态 -->
              <el-form >
                <el-form-item label="状态">
                  <template>
                    <el-radio v-model="addQuery.state" label="1">开启</el-radio>
                    <el-radio v-model="addQuery.state" label="2">关闭</el-radio>
                  </template>
                </el-form-item>
              </el-form>
                  <!-- 类型 -->
              <el-form >011
                <el-form-item label="类型">
                  <el-select v-model="addQuery.type" placeholder="活动类型">
                    <el-option label="服务协议" value="3"></el-option>
                    <el-option label="资讯" value="2"></el-option>
                    <el-option label="小区公告" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addFormData">确 定</el-button>
          </span>
        </el-dialog>
                  <!-- 分页 -->
        <Pagination
          :total ="total"
          @changePage ="handleSizeChange"
        />
      </template>
    </div>
  </el-card>


</template>
<script>
import Pagination from '../components/common/Pagination.vue'//分页
import TableList from '../components/common/Table.vue'//表格
import axios from "axios";
import {pishan,FormData,getAdminList} from '../utils/utils'
  export default {
    components:{
      TableList,
      Pagination
    },
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        tableHead:[{
          label:'id',
          prop:'id'
        },{
          label:'类型',
          prop:'type',
        },{
          label:'标题',
          prop:'title'
        },{
          label:'图片',
          prop:'pisture'
        },{
          label:'状态',
          prop:'state',
          type:'switch'
        },{
          label:'发布时间',
          prop:'addtime'
        },{
          label:'发布人',
          prop:'edituser'
        },{
          label:'操作',
          type:'button',
          button:{
            update: true,
            delete: true
          }
        },],
        // loading = true,
        // 批删
        dlelent: '',
        // 分页
        total: 1,
        // 文本域
        // textarea: '',

        radio: '1',
        // 图片上传
        imageUrl: '',
        // 可清空单选
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }],
        roleList:[],
        value: '',
        // 添加数据
        addQuery :{
          id: 0,
          title: "",//标题
          picture: "",//图片
          edituser: "",
          state: 1,//状态
          type: [],//类型
          hits: 0,
          content: "",//文本域
          addtime: "2021-10-25 09:56:47",//上传时间
        },
        // 分页
       
        // 开关
        kai: true,
        //打开弹框
        dialogVisible: false,
        // 循环的表格内容
        list: [],
        formlist:{
          page:1,
          psize:10
        }
      }
    },
    mounted(){
      this.liebiao()
      this.handleSizeChange()
      // this.handleSelectionChange()
    },
    methods: {
      // 修改按钮
      async xiu(val,data){
        this.dialogVisible = val
        if(val){
          this.dialogVisible = !!val
          if(this.dialogVisible){
            const qq = this.list.find(item => item.id == data.id)
            // console.log(qq)
            this.addQuery = qq
            // console.log(this.addQuery)
          }
        }else{
          
        }
      },
      // 添加修改按钮
      addFormData(){
        axios.post('/api/news/add',this.addQuery).then(res =>{
          console.log(res)
          this.dialogVisible = false,
          this.liebiao()
        })
      },
        
        
      handleSelectionChange(val){
        // console.log(val)
        this.dlelent = val
      },
      async shan(data){
        if(this.dlelent.length == 0){
          this.$message({
            type:'waring',
            message:'请勾选要删除的数据'
          })
        }else{
          // console.log(12);
          let id = []
          this.dlelent.forEach(item=>{
            id.push(item.id)
          })
          let res = await pishan({
            ids : id
          })
         if (res.errCode == "10000") {
           this.$message({
            type: 'success',
            message: '删除成功'
          })
         }
          this.liebiao()
        }
      },
      // 开关
      kaiguan(){
        console.log(369)
      },
      // 删除
      open(id){
        // console.log(123)
        this.$confirm('删除后就无法回复，',{
          confirmButtontext:'确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          axios.get('/api/news/delete',{params:{id: id}}).then(res =>{
            this.liebiao()
            this.$message({
              type:'success',
              message:'删除成功'
            })
          })
        }).catch(() =>{
          this.$message({
            type:'info',
            message: '已取消删除'
          })
        })
      },
      // 列表循环
      liebiao(){
        axios.get('/api/news/list').then((res)=>{0
          const {data,errCode} = res.data
          if(errCode == 10000){
            this.list = data.list
            console.log('table',this.list)
            this.total = data.counts
            // console.log(this.total)
          }else{
            console.log(123)
          }
        })
      },
      // 添加弹框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 上传图片
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // handleSizeChange (val) {
      //   this.formline.psize = val
      //   this.getRoleList()
      // },
      // handleCurrentChange (val) {
      //   this.formline.page = val
      //    this.getRoleList()
      // },
      // 查询
      onSubmit() {
        console.log('submit!');
      },
      async handleSizeChange(val) {
        // console.log(val)
        const {data} = await getAdminList(Object.assign(this.formlist,val))
        // console.log(data)
        this.list  = data.list
        this.total = data.counts
        
      },
      
    }
  }
</script>

<style scoped>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
  .block {
  padding-left: 200px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dotted #ccc;
    border-radius: 10px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>